import { DownloadOutlined, UploadOutlined } from '@ant-design/icons';
import { Button, Form, Input, message, Modal, Select, Tooltip, Upload } from 'antd';
import { FormInstance } from 'antd/lib/form/hooks/useForm';
import React from 'react';
import type { AddItem } from '../data';

interface AddFormProps {
  onSubmit: (values: AddItem) => void;
  onCancel: (flag?: boolean) => void;
  modalVisible: boolean;
}

const formItemLayout = {
  labelCol: {
    xs: { span: 4 },
    sm: { span: 4 },
  },
  wrapperCol: {
    xs: { span: 20 },
    sm: { span: 20 },
  },
};

function downloadImportFile(form: FormInstance<any>) {
  console.assert(form != null);
  const batchType = form.getFieldValue('batchType');
  if (!batchType) {
    message.error('请先选择任务类型,然后下载对应的模板文件');
    return;
  }

  if (batchType === '1') {
    const downloadUrl = '/downloads/device.xlsx';
    const downloadElement = document.createElement('a');
    downloadElement.href = downloadUrl;
    downloadElement.download = `设备导入模板.xlsx`;
    document.body.appendChild(downloadElement);
    downloadElement.click();
    document.body.removeChild(downloadElement);
  } else if (batchType === '2') {
    const downloadUrl = '/downloads/space.xlsx';
    const downloadElement = document.createElement('a');
    downloadElement.href = downloadUrl;
    downloadElement.download = `车位导入模板.xlsx`;
    document.body.appendChild(downloadElement);
    downloadElement.click();
    document.body.removeChild(downloadElement);
  } else {
    message.error('任务类型错误,没有模板下载');
  }
  return undefined;
}

const batchTypes = [
  { label: '设备导入', value: '1' },
  { label: '车位导入', value: '2' },
  // {label: '业主导入', value: '3'},
];

const AddForm: React.FC<AddFormProps> = (props) => {
  const [form] = Form.useForm();

  const {
    onSubmit: handleAdd,
    onCancel: handleAddModalVisible,
    modalVisible: addModalVisible,
  } = props;

  const onModalOk = async () => {
    const fieldsValue = (await form.validateFields()) as AddItem;
    fieldsValue.batchFileUrl = fieldsValue.file[0]?.response?.data?.url || '';
    handleAdd(fieldsValue);
  };

  const normFile = (e: any) => {
    if (Array.isArray(e)) {
      return e;
    }
    return e && e.fileList;
  };
  return (
    <Modal
      title="新建批量导入任务"
      visible={addModalVisible}
      destroyOnClose
      width={800}
      onOk={() => onModalOk()}
      onCancel={() => handleAddModalVisible(false)}
      afterClose={() => handleAddModalVisible()}
      okText="确定"
      cancelText="取消"
    >
      <Form {...formItemLayout} form={form} layout={'vertical'}>
        <Form.Item name="name" label="任务名称" rules={[{ required: true, message: '必填' }]}>
          <Input />
        </Form.Item>

        <Form.Item name="batchType" label="任务类型" rules={[{ required: true, message: '必填' }]}>
          <Select
            options={batchTypes}
            style={{ width: 120 }}
            onChange={(value) => {
              form.setFieldsValue({ batchType: value });
            }}
          />
          <Tooltip title="模板下载">
            <Button icon={<DownloadOutlined />} onClick={() => downloadImportFile(form)}>
              模板下载
            </Button>
          </Tooltip>
        </Form.Item>

        <Form.Item
          name="file"
          label="Upload"
          valuePropName="fileList"
          getValueFromEvent={normFile}
          extra="选择导入数据文件"
        >
          <Input.Group compact>
            <Upload name="file" action="/file/upload/singleImage" listType="picture">
              <Button icon={<UploadOutlined />}>选择导入数据文件</Button>
            </Upload>
            {/*<Tooltip title="模板下载">*/}
            {/*  <Button icon={<DownloadOutlined/>} onClick={() => downloadImportFile(form)}/>*/}
            {/*</Tooltip>*/}
          </Input.Group>
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default AddForm;
